<template>
  <div class="container_warp">
    <div class="ebook-header flex items-center gap-4 mb-4 flex-wrap">
      <div class="ebook-title">电子书</div>
      <ClientOnly>
        <d-input v-model="searchText" class="flex-1 min-w-[160px]" :maxlength="100" :placeholder="t('ebook.searchPlaceholder')" @keypress.enter="onSearch">
          <template #prefix>
            <GIcon name="gt-search" />
          </template>
        </d-input>
      </ClientOnly>
    </div>

    <div class="ebook-list grid gap-4">
      <div v-for="item in pageList" :key="item.title" class="ebook-card" @click="open(item.link)">
        <div class="cover">
          <img :src="item.cover" alt="" @error="onImgError($event)" />
        </div>
        <div class="body">
          <div class="title">{{ item.title }}</div>
          <div class="author ellipsis">主编：{{ item.author }}</div>
          <div class="desc ellipsis-two-line">{{ item.desc }}</div>
        </div>
      </div>
    </div>

    <div class="pagination_wrap" v-if="pager.total > pager.pageSize">
      <d-pagination size="sm" @page-index-change="pageChange" :total="pager.total" v-model:pageSize="pager.pageSize"
        v-model:pageIndex="pager.pageIndex" :can-view-total="true" :show-true-page-index="false" :can-jump-page="false" />
    </div>
  </div>
  
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import GIcon from '~/components/GIcon/index.vue'
import allEbookData from '../Data/ebook.json'

defineOptions({ name: 'EbookIndex' })
const { t } = useI18n()

type Ebook = {
  cover: string
  title: string
  author: string
  desc: string
  link: string
}

// 语言电子书数据
const lan = useCookie('lang').value || 'zh'
const ebookData = (allEbookData as any)[lan] || (allEbookData as any).zh
// 将各子分类拍平成列表（如果有）
const list = ref<Ebook[]>(Array.isArray(ebookData) ? ebookData : Object.values(ebookData || {}).flat())

const searchText = ref('')
const showList = ref<Ebook[]>([...list.value])
const pageList = ref<Ebook[]>([])

const pager = ref({
  total: 0,
  pageIndex: 1,
  pageSize: 9,
  pageSizeOptions: [9, 18, 27, 36],
})

function onSearch() {
  const key = (searchText.value || '').trim().toLowerCase()
  if (!key) {
    showList.value = [...list.value]
  } else {
    showList.value = list.value.filter(item => {
      const title = (item.title || '').toLowerCase()
      const author = (item.author || '').toLowerCase()
      const desc = (item.desc || '').toLowerCase()
      return title.includes(key) || author.includes(key) || desc.includes(key)
    })
  }
  pager.value.total = showList.value.length
  pager.value.pageIndex = 1
  makePage()
}

watch(searchText, () => onSearch())

function makePage() {
  const start = (pager.value.pageIndex - 1) * pager.value.pageSize
  const end = pager.value.pageIndex * pager.value.pageSize
  pageList.value = showList.value.slice(start, end)
}

function pageChange(index: number) {
  pager.value.pageIndex = index
  makePage()
}

// init
onMounted(() => {
  pager.value.total = showList.value.length
  makePage()
})

function open(href: string) {
  if (import.meta.client) {
    window.open(href, '_blank')
  }
}

function onImgError(e: Event) {
  const target = e.target as HTMLImageElement
  if (target && target.src !== '/default-ebook-cover.png')
    target.src = '/default-ebook-cover.png'
}

useSeoMeta({
  title: () => `电子书 - ${t('common.tdk.gitcodeTitle')}`,
})
</script>

<style scoped lang="scss">
.container_warp {
  max-width: 1200px;
  margin: 0 auto;
}

.ebook-header {
  padding: 0 0 8px;
}

.ebook-title {
  background: linear-gradient(90deg, #2951E0 0%, #8A25D9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: #0000;
  font-weight: 600;
  font-size: 20px;
}

.ebook-list {
  @apply grid-cols-1 md:grid-cols-2 xl:grid-cols-3;
  letter-spacing: 0em; // 仅本页重置，避免全局 .grid 字距影响
}

.ebook-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid #E3E3EE;
  border-radius: 8px;
  overflow: hidden;
  transition: transform .2s ease;
  background: #fff;

  &:hover { transform: translateY(-4px); }

  .cover { height: 180px; overflow: hidden; background: #fafafa; flex: 0 0 180px;
    img { width: 100%; height: 100%; object-fit: cover; display: block; }
  }
  .body { padding: 12px; display: flex; flex-direction: column; gap: 4px; background: #fff; }
  .title { font-weight: 600; font-size: 16px; line-height: 22px; margin-bottom: 2px; word-break: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .author { color: #707A87; font-size: 12px; line-height: 18px; margin: 2px 0 4px; }
  .desc { color: #9C9DB4; font-size: 12px; line-height: 18px; }
}

.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ellipsis-two-line {
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>


